<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<h1 style="text-align: center">注册</h1>
<form action="" style="width: 400px; margin: auto">
{% csrf_token %}
{% for i in fors %}
    {% if i.label == '验证码' %}
        <div class="form-group">
            <label for="{{ i.id_for_label }}">
                {{ i.label }}:
            </label>
            <div class="clearfix">
                    <div  class="col-md-6" style="padding-left: 0">{{ i }}</div>
                    <div  class="col-md-6 " ><input type="button" class="btn btn-default" id="b1" value="点击获取验证码"></div>
                </div>
        </div>
    {% else %}
         <div class="form-group">
            <label for="{{ i.id_for_label }}">
                {{ i.label }}:
            </label>
            {{ i }}
         {% endif %}
    </div>


{% endfor %}
<button type="button" class="btn btn-default" id="b2">提 交</button>
</form>
{#<form style="width: 600px; margin:auto">#}
{#    <div class="form-group">#}
{#        <label for="exampleInputEmail1">Email address</label>#}
{#        <input type="email" class="form-control" id="exampleInputEmail1"#}
{#               placeholder="Email">#}
{#    </div>#}
{#    <div class="form-group">#}
{#        <label for="exampleInputPassword1">Password</label>#}
{#        <input type="password" class="form-control" id="exampleInputPassword1"#}
{#               placeholder="Password">#}
{#    </div>#}
{#    <div class="form-group">#}
{#        <label for="exampleInputFile">File input</label>#}
{#        <input type="file" id="exampleInputFile">#}
{#        <p class="help-block">Example block-level help text here.</p>#}
{#    </div>#}
{#    <div class="checkbox">#}
{#        <label>#}
{#            <input type="checkbox"> Check me out#}
{#        </label>#}
{#    </div>#}
{#    <button type="submit" class="btn btn-default">Submit</button>#}
{#</form>#}
<script>
    var time = 60;
    $(function () {
        $('#b1').click(function () {
            $.ajax({
                url:'/app01/send_sms/',
                type:'post',
                data: {
                    'tpl':'602718',
                    'phone':$('[name="mobile_phone"]').val(),
                    csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val()
                },
                success:function (data) {
                    alert(data);
                    $('#b1').attr('disabled', 'disabled');
                    if (data=='短信已经发送至您的手机'&&time==60){
                        var time1 = setInterval(function () {
                            if (time == 0){
                                 $("#b1").val("重新发送");
                                 $("#b1").removeAttr("disabled");
                                 time = 60;
                                 clearInterval(time1)
                            }else {
                                $('#b1').val(time+'秒后发送');
                                time--
                            }
                        },1000)
                    }

                }


            });

        });
        $('#b2').click(function () {
            $.ajax({
                url: '/app01/register_information/',
                type: 'post',
                data:{
                    name:$('#id_name').val(),
                    password:$('#id_age').val(),
                    phone: $('#id_mobile_phone').val(),
                    code: $('#id_code').val(),
                    csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val()
                },
                success:function (data) {
                    alert(data)
                }
            })
        })
    })
</script>
</body>
</html>